<template>
	<div style="height:100%;">
		<div class="contentBox">
			<wrap-head :isChangeBigWidth.sync='isChangeBigWidth'></wrap-head>
			<wrap-slide :isChangeBigWidth.sync='isChangeBigWidth' @test="test"></wrap-slide>
			
			<div class="content" v-bind:class="classToggle" v-bind:style = "{minHeight : browserHeight + 'px'}">
				<div class="treeContain">
					<halo-tree :returnValue.sync="returnValue" type="Group" class="lt widthTree"></halo-tree>
				</div>
                
                <group-dept :returnValue.sync="returnValue" class="rt widthGroup"></group-dept>
			</div>
		</div>
	</div>
</template>

<script>
	
	import WrapHead from '@/components/public/Header'
	import WrapSlide from '@/components/public/leftNav'
    import haloTree from '@/components/router-component/tree'
    import groupDept from '@/components/deptGroup/groupDept'
 //	import {vueEle} from '@/common/js/vueBus.js'
    
	// import router from '@/router/index'
	export default {
	    data() {
	      	return {
	      		data1:null,
	      		menuData:null,
				browserHeight:null,
				isChangeBigWidth:false,
                returnValue:{}
	      	}
	    },
	    components:{
	    		WrapHead,
	    		WrapSlide,
                haloTree,
                groupDept
	    },
		computed: {
            classToggle: function () {
                return {
                'isBig': this.isChangeBigWidth,
                'isSmall': !this.isChangeBigWidth,
                }
            }
        },
	    methods:{
			test:function(value){
				console.log(value,'test');
			},

	    },
	    created(){

	    },
	    beforeMount(){
			var self = this;

	    },
		mounted(){
			this.browserHeight = Math.max(document.body[ "scrollHeight" ],document.documentElement[ "scrollHeight"])-50;
			console.log(this.browserHeight,'height');
	}
	}
</script>

<style scoped>
	/*section左侧部分样式*/
	.contentBox{
		position: relative;
		min-height: -moz-calc(100% );
		min-height: -ms-calc(100%);
		min-height: -webkit-calc(100%);
		min-height: calc(100%);

	}
	.treeContain{
		overflow: hidden;
		clear:both;
		width: 26%;
		position: fixed;
		background-color: #F7FBFC;
		bottom: 0px;
		top: 50px;
		padding-left: 15px;
		overflow-y: auto;
	}
	/*.sidebar .fa {
		margin-right: 5px;
	}
	.sidebar .fa-circle{
		font-size: 12px;
	}
	.sidebar .topTitle {
		background-color: #eee;
		height: 56px;
		line-height: 56px;
		padding: 0 10px;
	}
	.sidebar .settings {
		color: #858885;
	}
	
	.sidebar .settings div {
		margin-bottom: 10px;
	}*/
	
	.content{	
		position: absolute;
		top: 50px;
		
		right:0;
		background-color: #ecf0f5;
	
	}
    .widthGroup{
        width:69%;
        /*border-left:2px solid #DCE0E1;*/
        min-height:612px;
		padding-left:15px;
    }
    .widthTree{
		height:100%;
        background-color: #F7FBFC;
		padding-left:15px;
		min-width:370px;
        overflow-y:scroll;
        
    }
	.contentBox .isSmall{
		left: 230px;
		transition: margin 0.4s ease-in-out;
	}
	.contentBox .isBig{
		left: 50px;
		transition: margin 0.4s ease-in-out;
	}

</style>
<style>
.contentBox .el-loading-mask {
    background-color: rgba(16, 16, 16, 0.5);
}
</style>